<template>
  <div class="widget-view"
       @click="handleSelectWidget(index)"
       :class="{active: selectWidget.key == element.key,}">
      <div class="title">{{element.placeholder}}</div>
      <div class="widgetBox" :class="{'widgetTableBox': element.fieldType === 'table'}">
        <div class="widget-btn-pane" @click="delWidget" v-show="selectWidget.key == element.key && widgetList.length > 0">
          <i class="el-icon-delete"></i>
        </div>
        <el-form-item :class="{ 'is-required': element.config.required}"
                      v-if="widgetList.length > 0"
                      :label="widgetList[0].config.unit? widgetList[0].fieldName+ '('+ widgetList[0].config.unit+')': widgetList[0].fieldName">
          <template v-if="widgetList[0].fieldType == 'input'">
            <el-input
              v-model="widgetList[0].config.defaultValue"
              :placeholder="widgetList[0].config.placeholder"
              disabled></el-input>
          </template>

          <template v-if="widgetList[0].fieldType == 'textarea'">
            <el-input type="textarea" :rows="5"
                      v-model="widgetList[0].config.defaultValue"
                      disabled
                      :placeholder="widgetList[0].config.placeholder"></el-input>
          </template>
          <template v-if="widgetList[0].fieldType == 'date'">
            <el-date-picker
              v-model="widgetList[0].config.defaultValue"
              :type="widgetList[0].config.type"
              :placeholder="widgetList[0].config.placeholder"
              :readonly="widgetList[0].config.readonly"
              disabled
              :editable="element.config.editable"
              :clearable="widgetList[0].config.clearable"
            >
            </el-date-picker>
          </template>
          <template v-if="element.fieldType == 'select'">
            <el-select
              v-model="element.config.defaultValue"
              disabled
              :multiple="element.config.multiple"
              :clearable="element.config.clearable"
              :placeholder="element.config.placeholder">
            </el-select>
          </template>
          <template v-if="element.fieldType == 'autocomplete'">
            <el-autocomplete disabled></el-autocomplete>
          </template>
          <template v-if="element.fieldType == 'number'">
            <el-input-number v-model="element.config.defaultValue"
                      disabled>
            </el-input-number>
          </template>
        </el-form-item>
        <div class="dragBox forbidden-childe-pointer-events" v-show="element.fieldType!=='table' && widgetList.length<1"
             @dragover="dragInto" @dragleave="dragleave">
          <draggable
            v-model="widgetList"
            :no-transition-on-drag="true"
            v-bind="{group:'cmTemplate', ghostClass: 'ghost',animation: 100}"
            class="emptyBox"
            @add="handleWidgetAdd($event)">
            <div class="emptyBox" v-show="!isOver">
              <div class="noneContent">请从左侧拖拽来添加字段</div>
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Draggable from 'vuedraggable'
  export default {
    name: 'widgetFormItem',
    components: {
      Draggable
    },
    props: {
      element: {
        type: Object,
        default () {
          return {}
        }
      },
      'select': {},
      'index': {
        type: Number
      },
      'data': {},
      listKey: {
        type: String,
        default: 'list'
      }
    },
    data () {
      return {
        selectWidget: this.select,
        widgetList: [],
        isOver: false,
      }
    },
    computed: {
      ...mapGetters(['hasChoose'])
    },
    watch: {
      select (val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler (val) {
          this.$emit('update:select', val)
        },
        deep: true
      },
      element: {
        handler (val) {
          if (val.fieldType && val.type !== 'table') {
            this.widgetList = [{...val}]
          }
        },
        immediate: true
      },
    },
    methods: {
      dragInto () {
        if (this.hasChoose) {
          this.isOver = true
        }
      },
      dragleave () {
        this.isOver = false
      },
      handleSelectWidget (index) {
        this.selectWidget = this.data[this.listKey][index]
      },
      handleWidgetAdd ($event) {
        const oldIndex = $event.oldIndex
        this.widgetList[0].config = this.widgetList[0].config || {required: false}
        this.widgetList[0].config.width = this.element.config.width || this.widgetList[0].config.width
        if (typeof this.widgetList[0].config === "string") {
          this.widgetList[0].config = JSON.parse(this.widgetList[0].config)
        }
        this.$set(this.widgetList, 0, {
          ...this.widgetList[0],
          isFromWord: 1,
          config: {
            ...this.widgetList[0].config,
          },
        })
        if (this.widgetList[0].custom) {
          this.widgetList[0].fieldName = this.element.placeholder
        }
        this.$emit('updateData', this.widgetList, this.index)
        /*this.widgetList[0].config = this.widgetList[0].config || {required: false}
        if (typeof this.widgetList[0].config === "string") {
          this.widgetList[0].config = JSON.parse(this.widgetList[0].config)
        }*/
      },
      // 删除组件
      delWidget () {
        this.widgetList = []
        this.$emit('updateData', this.widgetList, this.index)
        this.isOver = false
      }
    }
  }
</script>

<style lang="scss">
  .line-width-1 {
    width: 100%;
  }
  .widget-view {
    min-height: 109px;
    margin: 5px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: move;
    .title {
      text-align: center;
      height: 23px;
      font-weight: bold;
      line-height: 23px;
      border-bottom: 1px solid #ddd;
      width: 100%;
    }
    .widgetBox {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      padding: 5px;
      .widget-btn-pane {
        position: absolute;
        right: 10px;
        top: 9px;
        height: 23px;
        width: 23px;
        box-shadow: 0 2px 4px 0 #ddd;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:hover {
          color: #d84636;
          background-color: #FDECEC;
        }
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
      }
      .sortable-chosen {
        display: none;
      }
      .dragBox {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        &.forbidden-childe-pointer-events * {
          pointer-events: none;
        }
      }
      .emptyBox {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .noneContent {
        color: #91A1B7
      }

      .el-form-item__label {
        background-color: rgba(0,0,0,0);
        font-weight: normal;
      }
    }
    .el-form-item {
      margin-bottom: 0;
      width: 100%;
      .el-select, .el-autocomplete{
        width: 100%;
      }
      .el-input-number {
        width: 100%;
        >span{
          display: none;
        }
      }
    }

    .widgetTableBox {
      padding: 0;
    }
  }
  .widget-view:hover {
    background-color: #F5F7FA;
  }
  .widget-view.active {
    background-color: #DEF1FF;
  }

  .subform-content {
    display: flex;
    .row-head {
      width: 68px;
      .head-label {
        background: #fff;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        width: 68px;
        height: 35px;
        border-top-left-radius: 3px;
      }
      .row-num {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fcfcfd;
        border-right: solid 1px #eee;
      }
    }
  }
</style>
